<script setup lang="ts">
import type { MessageData } from '@/types/Message'
const props = defineProps<{
  message:MessageData
}>()
const emit = defineEmits(['onFollow','toUser'])
const onFollow = (e:MouseEvent) =>{
  e.stopPropagation()
  emit('onFollow',props.message)
}
</script>

<template>
  <div class="cell" @click="emit('toUser',message)">
    
    <div class="image" :style="{ backgroundImage: `url(${message.userAvater})` }">
    </div>
    <div class="content">
      <van-text-ellipsis class="name" :content="message.userName" />
      <van-text-ellipsis class="subtitle" content="在抖音关注了您" />
      <van-text-ellipsis class="time" :content="message.time" />
    </div>
    <div class="btn" :class="{'btn-active':message.isFollow}" @click="onFollow">
    {{ message.isFollow? '互相关注':'回关' }}
  </div>
  </div>
</template>

<style lang="scss" scoped>
.cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.image {
  width:14vw;
  height: 14vw;
  background-color: #444;
  border-radius: 50%;
  margin: 4vw;
  background-size: cover;
}

.content {
  flex: 1;
}

.btn {
  font-size: 3vw;
  margin-right: 4vw;
  width: 16vw;
  height: 6vw;
  background-color: #666;
  border-radius: 1vw;
  color: #fff;
  text-align: center;
  line-height: 6vw;
}

.btn-active {
  background-color: #333;
  color: #666;
}

.name {
  color: #fff;
  font-size: 3vw;
  margin-top: 2vw;
}

.subtitle {
  color: #fff;
  font-size: 3vw;
  line-height: 3vw;
  margin-top: 1vw;
}

.time {
  color: #666;
  font-size: 2.5vw;
  line-height: 2.5vw;
  margin-top: 2vw;
}
</style>